<template>
	<view>
		<view  style="background:#c39a6d;height:40px;margin-bottom: 20px;">
			<view class="title">
				<text>团队介绍</text>
			</view>
		</view>	
		<view style="padding:7px;7px;7px;7px;" >
			<view v-for="(item,index) in steamlist" :key="item.id">
				<view class="casestyle">
					<view @click="ToCase(item)" style="width: 100%;height:120px" >
						<image class="caseimg" :src="api.getUrl(item.picture)"></image>
						<!-- <view style="padding: 0 10px;">1122</view> -->
					</view>
						<view @click="ToCase(item)" style="background-color: #eee;height: 40px;width: 100%;padding-left: 5px;box-sizing: border-box;">
						<view style="display: flex;">
							<text class="steam_name">{{item.title}} </text>
							<text class="steam_job">{{item.field3}}</text>
						</view>
						
					</view>
				</view>
					
			</view>
		</view>
		<view style="clear:both;"></view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
	
</template>

<script>
	
	import api from '@/common/api'
	export default {
		data() {
			return {
				api:api,
				parameter:{page:1,pagesize:6,cid:4},//cid为4代表是团队成员
				steamlist:[],
				status: 'more',
				isMore: true,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getData()
		},
		onHide(){
			console.log('hide')
		},
		onShareAppMessage: function () {
		
		},
		onPullDownRefresh() {
				this.parameter={page:1,pagesize:6,cid:4}
				this.steamlist = []
				this.getData();
		       setTimeout(function () {
		           uni.stopPullDownRefresh();
		       }, 1000);
		   },
		   onReachBottom() {
		   	if (this.isMore) {
		   		this.status = 'more';
		   		this.parameter.page++;
		   		this.getData();
		   	}
		   },
		methods: {
			ToCase(item){
				console.log(item)
				uni.navigateTo({
					url:"/pages/steam/show?id="+item.id+"&name="+item.name,
				})
			},
			getData:function(){
				this.$request.post('/api/app/content/getList',this.parameter).then(res=>{
					if(res.data.length > 0) {
						this.steamlist = this.steamlist.concat(res.data)
						if(this.steamlist.length < res.count) {
							this.status = 'more';
							this.isMore = true;
						} else {
							this.status = 'noMore';
							this.isMore = false;
						}
					} else {
						this.status = 'noMore';
						this.isMore = false;
					}
					
				});
			}
		}
			
	}
</script>

<style>
	
	.line{height: 30px;}
	.title{
		    line-height: 26px;
			padding-top:7px;	
		    text-align: center;
		    font-size: 16px;
		    color: #fff;
		    font-weight: bold;
	}
	.casestyle{
		position:relative;
		width:50%;
		height: 160px;
		float: left;
		padding-left: 7px;
		padding-right: 7px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}
	.caseimg{
		  width: 100%;
		  height: 100%;
	}
	.steam_name{
			width:40%;
			color: black;
			display: -webkit-box;
			    font-size: 16px;
			line-height: 40px;
			padding-left: 10px;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
	}
	.steam_job{
			padding-left: 7px;
			width:60%;
			color: black;
			display: -webkit-box;
			    font-size: 14px;
			line-height: 40px;
			padding-left: 10px;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
	}
</style>
